<template>
    <div class="right">
        <div class="header">会员中心-我的学情</div>
        <div class="content" v-loading="loading">
            <div class="tabs">
                <div v-for="(item, index) in navList" :key="index"
                    :class="navIndex == item.label ? 'tabs_items_active' : 'tabs_items'">
                    {{ item.label }}
                </div>
            </div>
            <div class="bottom">
                <div class="title">
                    练习{{ practiceTimes }}次，正确率平均{{ accuracy }}
                </div>

                <div class="storage_left_box" ref="storageLeft"></div>
            </div>

        </div>
    </div>
</template>
<script setup lang="ts">
import { getLearningSituation } from '@/api/index'
import * as echarts from 'echarts';

const navList = ref([
    { label: '练习', value: '' },
])
const navIndex = ref('练习')
const practiceTimes = ref(0)
const accuracy = ref()
const valueList1 = ref([])
const valueList2 = ref([])
const loading = ref(false)
const storageLeft = ref()
const getList = async () => {
    loading.value = true
    const res = await getLearningSituation({})
    practiceTimes.value = res.data[0].practiceTimes
    accuracy.value = res.data[0].accuracy
    valueList1.value = res.data.map(item => item.correctNumber)
    valueList2.value = res.data.map(item => item.incorrectNumber)

    init()

    loading.value = false
}

const init = async () => {
    console.log(1)
    await nextTick();
    let chartInstancePie2: any = null;
    chartInstancePie2 = echarts.init(storageLeft.value);
    let option1 = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            show: true,
            left: "center",
            top: '0%',
        },
        xAxis: {
            type: 'category',
            data: ['第1日', '第2日', '第3日', '第4日', '第5日', '第6日', '第7日',],
            axisTick: {
                show: false
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    // type: 'dashed',
                    // color: '#DCDFE6'
                }
            },
            splitLine: {
                lineStyle: {
                    // type: 'dashed',
                    // color: '#DCDFE6'
                }
            }
        },
        grid: {
            left: '5%',
            right: '5%',
            top: '15%',
            bottom: '10%'
        },
        series: [
            {
                name: '正确',
                data: valueList1.value,
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    color: 'rgba(255,168,161)'
                },
                itemStyle: {
                    color: 'rgba(255,168,161)',
                    borderRadius: [20, 20, 0, 0],
                }
            },
            {
                name: '错误',
                data: valueList2.value,
                type: 'bar',
                label: {
                    show: true,
                    position: 'top',
                    color: 'rgba(255,114,81)'
                },
                itemStyle: {
                    color: 'rgba(255,114,81)',
                    borderRadius: [20, 20, 0, 0],
                }
            },
        ]
    };
    chartInstancePie2.setOption(option1, true);

    initResize(chartInstancePie2)
}

const initResize = (echartsDom: any) => {
    window.addEventListener('resize', function () {
        echartsDom.resize();
    });
}

onMounted(async () => {
    getList()
});
</script>
<style scoped lang="scss">
.right {
    width: calc(100% - 410px);
    height: 100%;

    .header {
        width: 100%;
        padding: 15px 0;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #000000;
        border-bottom: 1px solid #E6E6E6;
    }

    .content {
        width: 100%;
        height: calc(100% - 55px);
        box-sizing: border-box;
        padding: 40px 0 0 0;

        .tabs {
            width: 100%;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E6E6E6;
            line-height: 2;

            .tabs_items {
                margin-right: 30px;
                color: #A0A0A0;
                font-size: 16px;
                cursor: pointer;
            }

            .tabs_items_active {
                margin-right: 30px;
                color: #000000;
                font-size: 18px;
                cursor: pointer;
            }
        }

        .bottom {
            width: 100%;
            height: calc(100% - 37px);
            text-align: center;

            .title {
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 24px;
                color: #000000;
                margin: 20px;
            }
            .storage_left_box{
                width: 100%;
                height: 400px;
            }
        }
    }
}
</style>